<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
		<title>四则运算</title>
		<style type="text/css"  >
			body{
				font-family: "微软雅黑";
				font-size: 20px;
				margin: 0 auto;
			}
			h2{
				margin-top: 20px;
				color:#3071A9;
			}
			#operation{
				margin-top: 150px;
				margin-left:500px ;
			}
			#Num2{
				margin-top: 10px;
			}
			#Ans{
				margin-top: 10px;
			}
			#btn1,#btn2,#btn3,#btn4{
				width: 30px;
				height: 30px;
				margin: 10px 10px;
			}
		</style>
	</head>
	<script>
		window.onload = function()
		{
			var oBtn1 = document.getElementById('btn1');
			var oBtn2 = document.getElementById('btn2');
			var oBtn3 = document.getElementById('btn3');
			var oBtn4 = document.getElementById('btn4');
			var oTxt1 = document.getElementById('Num1');
			var oTxt2 = document.getElementById('Num2');
			var oTxt3 = document.getElementById('Ans');
			oBtn1.onclick = function sum()
				{
					oTxt3.value=parseInt(oTxt1.value)+parseInt(oTxt2.value);
					//alert(oTxt3.value);
				};
			oBtn2.onclick = function sub()
				{
					oTxt3.value=parseInt(oTxt1.value)-parseInt(oTxt2.value);
				   //alert(oTxt3.value);
				};
			oBtn3.onclick = function mul()
				{
					oTxt3.value=parseFloat(oTxt1.value)*parseFloat(oTxt2.value);
					//alert(oTxt3.value);
				};
			oBtn4.onclick = function divsion()
				{
					oTxt3.value=parseFloat(oTxt1.value)/parseFloat(oTxt2.value);
					//alert(oTxt3.value);
				};
		}
		
	</script>
	<body background="简单美丽.jpg">
		<div id="operation">
			<h2>简单的四则运算</h2>
			<input type="text" id="Num1" placeholder="请输入第一个数">
			<br />
			<input type="text" id="Num2" placeholder="请输入第二个数">
			<br />
			<button class="btn btn-primary" type="submit" id="btn1" onclick="sum()" >+</button>
			<button class="btn btn-primary" type="submit" id="btn2" onclick="sub()">-</button>
			<br />
			<button class="btn btn-primary" type="submit" id="btn3" onclick="mul()">*</button>
			<button class="btn btn-primary" type="submit" id="btn4" onclick="divsion()">/</button>	
			<br />
			<input type="text" id="Ans" >
		</div>
	</body>
</html>
